<template>
	<div>
		<d2-container v-if="!orderShow">
			<div slot="header" style="display:flex; justify-content: space-between;">
				<div>订单管理</div>
				<div>
					<el-form :inline="true" class="demo-form-inline" size="small">
						<el-form-item label="时间" size="small">
							<el-date-picker
								v-model="date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								format="yyyy 年 MM 月 dd 日"
								value-format="yyyy-MM-dd"
							></el-date-picker>
						</el-form-item>
						<el-form-item label="关键词"><el-input placeholder="关键词" v-model="search"></el-input></el-form-item>
						<el-form-item><el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button></el-form-item>
					</el-form>
				</div>
			</div>
			<div>
				<template>
					<el-table :data="tableData" stripe style="width: 100%">
						<el-table-column type="index" width="50" label="序号"></el-table-column>
						<el-table-column prop="created_at" label="日期"></el-table-column>
						<el-table-column prop="order_sn" label="单号"></el-table-column>
						<el-table-column prop="username" label="客户名称"></el-table-column>
						<el-table-column prop="mobile" label="手机号"></el-table-column>
						<el-table-column prop="price" label="价格" ></el-table-column>
						<el-table-column label="支付方式" >
							<template slot-scope="scope"> 
								<el-tag v-if="scope.row.type==1">微信</el-tag>
								<el-tag type="success" v-if="scope.row.type==2">余额</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="状态" >
							<template slot-scope="scope"> 
								<el-tag v-if="scope.row.state==1">未支付</el-tag>
								<el-tag type="success" v-if="scope.row.state==2">已支付</el-tag>
								<el-tag type="warning" v-if="scope.row.state==3">已完成</el-tag>
								<el-tag type="danger" v-if="scope.row.state==4">已退款</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<!-- <el-button type="text" size="small">打印订单</el-button> -->
								<el-button type="text" size="small" @click="ondetails(scope.row.id)">详情</el-button>
								<el-button type="text" size="small" @click="onTuiKuan(scope.row.id)" v-if="scope.row.state!=4&&scope.row.state!=1">退款</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<!-- 分页 -->
			<template slot="footer">
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page="page.current"
					layout="total, prev, pager, next, jumper"
					:total="page.total"
					:page-size="page.size"
				></el-pagination>
			</template>
		</d2-container>
		<order-details v-model="orderShow" :id="id"></order-details>
	</div>
</template>

<script>
import orderDetails from './orderDetails';
import { getOrder,postOrderUpdate,getOrderBack  } from '@/api/api';
export default {
	components: {
		orderDetails
	},
	data() {
		return {
			date: '',
			tableData: [],
			orderShow: false,
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
			id:-1,
			search:''
		};
	},
	mounted() {
		this.getOrderData();
	},
	methods: {
		getOrderData() {
			let data = {
				page: this.page.current,
				search:this.search,
				start_time:this.date[0],
				end_time:this.date[1]
			};
			getOrder(data).then(res => {
				if (res.state == 0) {
					this.tableData = res.data.data;
					this.page.size = res.data.per_page;
					this.page.total = res.data.total;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		//搜索
		onSearch(){
			this.page.current;
			this.getOrderData()
		},
		//分页
		handleCurrentChange(val) {
			this.page.current = val;
			this.getOrderData();
		},
		ondetails(id) {
			this.id=id;
			this.orderShow = true;
		},
		onTuiKuan(id){
			this.$confirm('此操作将退款给用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				getOrderBack(id).then(res => {
					if (res.state == 0) {
						this.$message.success('退款成功!');
						this.getOrderData();
					}
				});
			});
		}
	}
};
</script>

<style></style>
